<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>欢迎注册</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style-type: none;
        }
        .reg-content{
            padding: 30px;
            margin: 3px;
        }
        a, img {
            border: 0;
        }

        body {
            background-image: url("img/reg_bg_min.jpg") ;
            text-align: center;
        }

        table {
            border-collapse: collapse;
            border-spacing: 0;
        }

        td, th {
            padding: 0;
            height: 90px;

        }
        .inputs{
            vertical-align: top;
        }

        .clear {
            clear: both;
        }

        .clear:before, .clear:after {
            content: "";
            display: table;
        }

        .clear:after {
            clear: both;
        }

        .form-div {
            background-color: rgba(255, 255, 255, 0.27);
            border-radius: 10px;
            border: 1px solid #aaa;
            width: 424px;
            margin-top: 150px;
            margin-left:1050px;
            padding: 30px 0 20px 0px;
            font-size: 16px;
            box-shadow: inset 0px 0px 10px rgba(255, 255, 255, 0.5), 0px 0px 15px rgba(75, 75, 75, 0.3);
            text-align: left;
        }

        .form-div input[type="text"], .form-div input[type="password"], .form-div input[type="email"] {
            width: 268px;
            margin: 10px;
            line-height: 20px;
            font-size: 16px;
        }

        .form-div input[type="checkbox"] {
            margin: 20px 0 20px 10px;
        }

        .form-div input[type="button"], .form-div input[type="submit"] {
            margin: 10px 20px 0 0;
        }

        .form-div table {
            margin: 0 auto;
            text-align: right;
            color: rgba(64, 64, 64, 1.00);
        }

        .form-div table img {
            vertical-align: middle;
            margin: 0 0 5px 0;
        }

        .footer {
            color: rgba(64, 64, 64, 1.00);
            font-size: 12px;
            margin-top: 30px;
        }

        .form-div .buttons {
            float: right;
        }

        input[type="text"], input[type="password"], input[type="email"] {
            border-radius: 8px;
            box-shadow: inset 0 2px 5px #eee;
            padding: 10px;
            border: 1px solid #D4D4D4;
            color: #333333;
            margin-top: 5px;
        }

        input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus {
            border: 1px solid #50afeb;
            outline: none;
        }

        input[type="button"], input[type="submit"] {
            padding: 7px 15px;
            background-color: #3c6db0;
            text-align: center;
            border-radius: 5px;
            overflow: hidden;
            min-width: 80px;
            border: none;
            color: #FFF;
            box-shadow: 1px 1px 1px rgba(75, 75, 75, 0.3);
        }

        input[type="button"]:hover, input[type="submit"]:hover {
            background-color: #5a88c8;
        }

        input[type="button"]:active, input[type="submit"]:active {
            background-color: #5a88c8;
        }
        .err_msg{
            color: red;
            padding-right: 170px;
        }
        #password_err,#tel_err{
            padding-right: 195px;
        }

        #reg_btn{
            margin-right:50px; width: 285px; height: 45px; margin-top:20px;
        }
    </style>
</head>
<body>

<div class="form-div">
    <div class="reg-content">
        <h1>欢迎注册</h1>
        <span>已有帐号？</span> <a href="#">登录</a>
    </div>
    <form id="reg-form" action="demo03" method="post">
        <table>
            <tr>
                <td>用户名</td>
                <td class="inputs">
                    <input name="username" type="text" id="username">
                    <br>
                    <span id="username_err" class="err_msg" style="display: none">用户名格式不对</span>
                </td>
            </tr>

            <tr>
                <td>密码</td>
                <td class="inputs">
                    <input name="password" type="password" id="password">
                    <br>
                    <span id="password_err" class="err_msg" style="display: none">密码格式有误</span>
                </td>
            </tr>

            <tr>
                <td>手机号</td>
                <td class="inputs"><input name="tel" type="text" id="tel">
                    <br>
                    <span id="tel_err" class="err_msg" style="display: none">手机号格式有误</span>
                </td>
            </tr>
        </table>

        <div class="buttons">
            <input value="注 册" type="submit" id="reg_btn">
        </div>
        <br class="clear">
    </form>
</div>

<script>
    // 校验用户名
    // 1.获取表单输入框
    let inputElement = document.getElementById("username");
    // 2.绑定 onblur事件
    inputElement.onblur = function () {
        // 3.获取输入内容
        let name = inputElement.value.trim();
        let reg = /^\w{6,12}$/;
        let b = reg.test(name);
        if (b) {
            // 4.判断是否符合规则, 隐藏
            document.getElementById("username_err").style.display = 'none';
        } else {
            // 5.如果不合符规则，则显示错误提示信息 显示
            document.getElementById("username_err").style.display = '';
        }

        return b;
    };

    // 校验手机号
    // 1.获取表单输入框
    let phoneElement = document.getElementById("tel");
    // 2.绑定 onblur事件
    phoneElement.onblur = function () {
        // 3.获取输入内容
        let phone = phoneElement.value.trim();
        let reg = /^1[3456789]\d{9}$/;
        let b = reg.test(phone);

        let sp = document.getElementById("tel_err");
        if (b) {
            // 4.判断是否符合规则, 符合规则, 隐藏提示
            sp.style.display = 'none';
        } else {
            // 5.如果不合符规则，则显示错误提示信息
            sp.style.display = '';
        }

        return b;
    };

    // 当点击提交按钮表单准备提交时执行
    document.getElementById("reg-form").onsubmit = function () {
        // return true; // 会提交表单
        // return false; // 没有提交表单

        return inputElement.onblur() && phoneElement.onblur();
    }
</script>

</body>
</html>